<template>
    
    <homeBase @update_patient="update_patient" >
        <template v-slot:title>
            <p >病人信息查询</p>
        </template>
        <!-- <search /> -->
        <template v-slot:container>
            <div class="patient-info">
            <table class="patient-data" v-if="patient">
               <tr>
                    <td class="key">姓名</td><td colspan="4" class="value" id="name" @blur="td_change1($event)">{{ patient.name }}</td>
                    <td class="key">出生年日</td><td colspan="3" class="value" id="birthday" @blur="td_change1($event)">{{ patient.birthday }}</td>
                    <td colspan="1" style="fontSize:10px" v-show="patient.age">年龄：{{ patient.age }}</td>
                </tr>
                <tr>
                    <td class="key">身份证号</td><td colspan="4" class="value" id="card_id" @blur="td_change1($event)">{{ patient.card_id }}</td>
                    <td class="key">手机号码</td><td colspan="4" class="value" id="phone" @blur="td_change1($event)">{{ patient.phone }}</td>
                </tr>
                <tr>
                    <td class="key">最近看病时间</td><td colspan="4" class="value" id="last_time" @blur="td_change1($event)">{{ patient.last_time }}</td>
                    <td class="key">医保类别</td><td colspan="4" class="value" id="medical_insurance" @blur="td_change1($event)">{{ patient.medical_insurance }}</td>
                </tr>
                <tr>
                    <td class="key">目前身体状况</td><td colspan="4" class="value" id="health" @blur="td_change1($event)">{{ patient.health }}</td>
                    <td class="key">性别</td><td colspan="4" class="value" id="gender" @blur="td_change1($event)">{{ patient.gender }}</td>
                </tr>
            </table>
            <p v-else class="spare">请输入你要查询的信息</p>
            <div class="button" v-if="patient">
                <button class="edit" @click="edit($event)">{{ button_text }}</button>
                <button v-show="submitShow" class="submit" @click="submit">提交</button>
            </div>
            </div>
        </template>
    </homeBase>
    
</template>

<script>
import homeBase from '@/components/home/homeBase.vue'
import qs from 'qs'
export default {
    props:['title'],
    data(){
        return{
            submitShow:false,
            button_text:'编辑信息',
            select_medical_record:null,
            patient:{
                name:"",
                age:"",
                card_id:"",
                phone:"",
                last_time:"",
                register_n:"",
                health:"",
                medical_record:[],
                treat_record:[]
            },
            new_patient:{},
        }
    },
    components:{
        homeBase
    },
    methods:{
        edit(e){
            // 判断用户是否登录，如果没有登录则不能编辑用户
            const logininfo = JSON.parse(localStorage.getItem("logininfo"));  // 把字符串转json格式
            if(!logininfo){
                this.$toast.fail("你还未登录 请先登录")
                return
            }
            let el = document.querySelectorAll(".value")
            if(this.button_text=='编辑信息'){
                this.button_text='取消'
                this.submitShow=!this.submitShow
                el.forEach(item=>{
                    item.setAttribute("contentEditable",this.submitShow)
                })
                el[0].focus()
            }else{
                this.button_text='编辑信息'
                this.submitShow=!this.submitShow
                this.update_patient()
                el.forEach(item=>{
                    item.setAttribute("contentEditable",this.submitShow)
                })
            }
        },
        add_medical_record(){
            let promise = new Promise((resolve,reject)=>{
                // 这是一个异步函数，先添加数据，需要用异步函数才能改变它对应的dom元素属性
                let time = new Date().toLocaleDateString().replace(/\//g,"-")
                this.patient.medical_record.push([time,""])
                resolve("ok")
            }).then(msg=>{
                let el = document.querySelectorAll(".value")
                el.forEach(item=>{
                    item.setAttribute("contentEditable",this.submitShow)
                })
            })
        },
        del_medical_record(){  // 删除病历
            if(this.select_medical_record==null){
                this.$toast.fail("请先点击要删除的病历")
                return
            }
            this.patient.medical_record.splice(this.select_medical_record,1)
            this.select_medical_record=null
        },
        current_medical_record(index){  // 记录当前选择的病历
            this.select_medical_record=index
        },
        td_change(el,index,num){  // 输入病历信息后，保存病历信息
            if(num==0){
                this.patient.medical_record[index].splice(0,1,el.currentTarget.innerText)
            }else if(num==1){
                this.patient.medical_record[index].splice(1,1,el.currentTarget.innerText)
            }
        },
        td_change1(e){  // 保存基本资料
            let el = e.currentTarget
            let id = e.currentTarget.getAttribute("id")
            this.patient[id]=el.innerText.trim()
        },
        check_data(){  // 检查输入的信息是否正确
            for (let item in this.patient){
                if(this.$my_tools.check_data[item]){ 
                    let msg=this.$my_tools.check_data[item](this.patient[item])
                    if(msg){
                        this.$toast(msg)
                        return false
                    }
                }
            }
        },
        submit(){  // 提交新病人信息
            if(this.check_data()==false){
                return
            }
            // document.querySelectorAll(".edit")[0].innerText="编辑信息"
            this.button_text='编辑信息'
            this.submitShow=false
            let values = document.querySelectorAll(".value")
            values.forEach((item,index)=>{
                item.setAttribute("contentEditable",this.submitShow)
            })
            // 发送ajax请求，保存数据
            // let xmlhttp=new XMLHttpRequest();
            // xmlhttp.open("post","ajax/api/edit_patient",true);
            // xmlhttp.send(this.patient);
            // console.log(xmlhttp.responseText);
            // let params = qs.stringify(this.patient)
            // let params = JSON.stringify(this.patient)
            this.$http({
                method:'post',
                url:'ajax/api/edit_patient',
                data:{
                    patient:this.patient
                }
            }).then(data=>{
                if(data.data=="ok"){
                    this.$toast.success("编辑成功")
                    this.$store.state.patient[0] =this.$my_tools.deepClone(this.patient)
                    // this.$http({
                    //     method:'post',
                    //     url:'/ajax/api/search_patient',
                    //     data:{
                    //         patient:{name:this.patient.name}
                    //     }
                    // }).then(data=>{
                    //     this.$store.state.patient = data.data
                    //     this.patient=this.$store.state.patient[0]
                    //     // if(this.$route.path=="/add_patient"){
                    //     //     this.$router.push("/patientInfo")
                    //     // }
                    // })

                }else{
                    this.$toast.fail("编辑失败，发生未知错误")
                }
            })

            
        },
        update_patient(){  // 更新数据
            if(this.$store.state.patient[0]){
                this.patient = this.$my_tools.deepClone(this.$store.state.patient[0][0])
            }
        },
    },
    computed:{
        now_date:{
            get(){
                let new_date = new Date()
                return new_date.toLocaleDateString();
            }
        }
    },
    mounted(){
        // this.patient = this.$my_tools.deepClone(this.$store.state.patient[0])
        // 更新数据
        this.update_patient()
    }
}
</script>

<style lang='scss' scoped>
.patient-info{
    border: 1px solid #ccc;
    // width: 90%;
    height: 100%;
    margin-top: 5px;
    padding: 5px;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    // 表格样式
    table{
        flex:0 0 auto;
    }
    table,tr,td{
        border: 1px solid #aaa;
        vertical-align: middle;
        
    }
    td{
        padding: 8px;
        // word-break: break-all;
        // line-height: 18px;
    }
    .key{
        font-weight: bolder;
        width: 100px;
    }
    .value{
        width: 200px;
        word-break: break-all;
    }
    .button{
        display: flex;
        margin-left: 10px;
        // flex:1;
        flex-direction: column;
        button{
            margin-bottom: 10px;
        }
    }
    .center{
        font-weight: bolder;
        // text-align: center;
    }
    .spare{
        font-size: 20px;
        font-weight: bolder;
        margin: 50px auto;
    }
    .select{
        background-color: #f1f1f1;
    }
}
</style>